<template>
  <div id="homechart2">
    <div ref="chart"></div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chart: null,
      colors: [
        "#FF6F61", // 活力珊瑚红
        "#6B5B95", // 神秘紫罗兰
        "#88B04B", // 清新薄荷绿
        "#F7CAC9", // 淡雅粉晶
        "#D65076", // 热情玫瑰红
        "#EFC050", // 明快金黄
        "#92A8D1", // 宁静天蓝
        "#99B898", // 自然橄榄绿
        "#FECEAB", // 柔和桃色
        "#C8C8A9", // 温柔灰绿
      ],
      option: {
        // backgroundColor: new this.$echarts.graphic.RadialGradient(
        //   0.3,
        //   0.3,
        //   0.8,
        //   [
        //     {
        //       offset: 0,
        //       color: "#f7f8fa",
        //     },
        //     {
        //       offset: 1,
        //       color: "#cdd0d5",
        //     },
        //   ]
        // ),
        // title: {
        //   text: "三国演义中人名出现次数排名",
        //   subtext: "ZBH",
        //   top: "top",
        //   left: "center",
        // },
        tooltip: {},

        legend: [
          {
            tooltip: {
              show: true,
            },
            selectedMode: "false",
            bottom: 20,
            data: [
              "刘备2239",
              "诸葛亮1892",
              "曹操979",
              "关羽948",
              "张飞408",
              "赵云393",
              "孙权390",
              "吕布384",
              "周瑜328",
              "魏延327",
            ],
          },
        ],
        animationDuration: 3000,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            name: "三国演义",
            type: "graph",
            layout: "force",

            force: {
              repulsion: 300,
            },

            data: [
              {
                name: "三国演义",
                // "x": 0,
                // y: 0,
                symbolSize: 150,
                draggable: "true",
                value: 27,
              },
              {
                name: "刘备2239",
                value: 1,
                symbolSize: 80,
                category: "刘备2239",
                draggable: "true",
              },
              {
                name: "使君70",
                symbolSize: 30,
                category: "刘备2239",
                draggable: "true",
                value: 2,
              },
              {
                name: "玄德1770",
                symbolSize: 60,
                category: "刘备2239",
                draggable: "true",
                value: 1,
              },
              {
                name: "皇叔112",
                symbolSize: 15,
                category: "刘备2239",
                draggable: "true",
                value: 3,
              },
              {
                name: "诸葛亮1892",
                value: 4,
                symbolSize: 60,
                category: "诸葛亮1892",
                draggable: "true",
              },
              {
                name: "孔明1643",
                symbolSize: 50,
                category: "诸葛亮1892",
                draggable: "true",
                value: 1,
              },
              {
                name: "卧龙40",
                symbolSize: 3,
                category: "诸葛亮1892",
                draggable: "true",
                value: 1,
              },
              {
                name: "曹操979",
                value: 5,
                symbolSize: 40,
                category: "曹操979",
                draggable: "true",
              },
              {
                name: "孟德29",
                symbolSize: 3,
                category: "曹操979",
                draggable: "true",
                value: 1,
              },
              {
                name: "曹公44",
                symbolSize: 7,
                category: "曹操979",
                draggable: "true",
                value: 1,
              },
              {
                name: "关羽948",
                value: 1,
                symbolSize: 18,
                category: "关羽948",
                draggable: "true",
              },
              {
                name: "云长431",
                symbolSize: 20,
                category: "关羽948",
                draggable: "true",
                value: 1,
              },
              {
                name: "关公508",
                symbolSize: 25,
                category: "关羽948",
                draggable: "true",
                value: 1,
              },
              {
                name: "张飞408",
                value: 8,
                symbolSize: 25,
                category: "张飞408",
                draggable: "true",
              },
              {
                name: "翼德55",
                symbolSize: 5,
                category: "张飞408",
                draggable: "true",
                value: 1,
              },
              {
                name: "赵云393",
                value: 51111,
                symbolSize: 30,
                category: "赵云393",
                draggable: "true",
              },
              {
                name: "子龙95",
                symbolSize: 7,
                category: "赵云393",
                draggable: "true",
                value: 1111,
              },
              {
                name: "孙权390",
                value: 30,
                symbolSize: 30,
                category: "孙权390",
                draggable: "true",
              },
              {
                name: "仲谋10",
                symbolSize: 3,
                category: "孙权390",
                draggable: "true",
                value: 1,
              },
              {
                name: "吴侯72",
                symbolSize: 10,
                category: "孙权390",
                draggable: "true",
                value: 1,
              },
              {
                name: "吕布384",
                value: 1,
                symbolSize: 30,
                category: "吕布384",
                draggable: "true",
              },
              {
                name: "奉先15",
                symbolSize: 3,
                category: "吕布384",
                draggable: "true",
                value: 1,
              },
              {
                name: "温侯12",
                symbolSize: 3,
                category: "吕布384",
                draggable: "true",
                value: 1,
              },
              {
                name: "周瑜328",
                value: 6,
                symbolSize: 18,
                category: "周瑜328",
                draggable: "true",
              },
              {
                name: "公瑾60",
                symbolSize: 5,
                category: "周瑜328",
                draggable: "true",
                value: 1,
              },
              {
                name: "周郎35",
                symbolSize: 3,
                category: "周瑜328",
                draggable: "true",
                value: 1,
              },
              {
                name: "魏延327",
                value: 6,
                symbolSize: 18,
                category: "魏延327",
                draggable: "true",
              },
              {
                name: "文长12",
                symbolSize: 3,
                category: "魏延327",
                draggable: "true",
                value: 1,
              },
            ],
            links: [
              {
                source: "三国演义",
                target: "刘备2239",
              },
              {
                source: "刘备2239",
                target: "使君70",
              },
              {
                source: "刘备2239",
                target: "玄德1770",
              },
              {
                source: "刘备2239",
                target: "皇叔112",
              },
              {
                source: "三国演义",
                target: "诸葛亮1892",
              },
              {
                source: "诸葛亮1892",
                target: "孔明1643",
              },
              {
                source: "诸葛亮1892",
                target: "卧龙40",
              },
              {
                source: "三国演义",
                target: "曹操979",
              },
              {
                source: "曹操979",
                target: "孟德29",
              },
              {
                source: "曹操979",
                target: "曹公44",
              },
              {
                source: "三国演义",
                target: "关羽948",
              },
              {
                source: "关羽948",
                target: "云长431",
              },
              {
                source: "关羽948",
                target: "关公508",
              },
              {
                source: "三国演义",
                target: "张飞408",
              },
              {
                source: "张飞408",
                target: "翼德55",
              },
              {
                source: "三国演义",
                target: "赵云393",
              },
              {
                source: "赵云393",
                target: "子龙95",
              },
              {
                source: "三国演义",
                target: "孙权390",
              },
              {
                source: "孙权390",
                target: "仲谋10",
              },
              {
                source: "孙权390",
                target: "吴侯72",
              },
              {
                source: "三国演义",
                target: "吕布384",
              },
              {
                source: "吕布384",
                target: "奉先15",
              },
              {
                source: "吕布384",
                target: "温侯12",
              },
              {
                source: "三国演义",
                target: "周瑜328",
              },
              {
                source: "周瑜328",
                target: "公瑾60",
              },
              {
                source: "周瑜328",
                target: "周郎35",
              },
              {
                source: "三国演义",
                target: "魏延327",
              },
              {
                source: "魏延327",
                target: "文长12",
              },
              {
                source: "三国演义",
                target: "法学院",
              },
            ],
            categories: [
              {
                name: "刘备2239",
              },
              {
                name: "诸葛亮1892",
              },
              {
                name: "曹操979",
              },
              {
                name: "关羽948",
              },
              {
                name: "张飞408",
              },
              {
                name: "赵云393",
              },
              {
                name: "孙权390",
              },
              {
                name: "吕布384",
              },
              {
                name: "周瑜328",
              },
              {
                name: "魏延327",
              },
              {},
            ],
            emphasis: {
              focus: "adjacency",
            },
            // focusNodeAdjacency: true,
            roam: true,
            // label: {
            //     show: true,
            //     position: "top",
            // },
            label: {
              show: true, // 显示标签
              position: "inside", // 将标签位置设为节点内部
              formatter: "{b}", // 使用节点名称作为标签文本
              fontSize: 14, // 根据需要调整字体大小
              color: "#000", // 根据需要调整字体颜色
            },
            lineStyle: {
              color: "source",
              curveness: 0,
              type: "solid",
            },
            // itemStyle: {
            //     // borderColor: "#04f2a7",
            //     // borderWidth: 6,
            //     // shadowBlur: 20,
            //     // shadowColor: "#04f2a7",
            //     color: function(params){
            //       const colors = ["#ff5722", "#4caf50", "#2196f3", "#9c27b0"];
            //       console.log(params,3334);
            //       const color = colors[params.data.value % colors.length];
            //       console.log(color,555);
            //       return color;
            //     },
            // },
          },
        ],
      },

      option2: {
        // backgroundColor: new this.$echarts.graphic.RadialGradient(
        //   0.3,
        //   0.3,
        //   0.8,
        //   [
        //     {
        //       offset: 0,
        //       color: "#f7f8fa",
        //     },
        //     {
        //       offset: 1,
        //       color: "#cdd0d5",
        //     },
        //   ]
        // ),
        // title: {
        //   text: "三国演义中人名出现次数排名",
        //   subtext: "ZBH",
        //   top: "top",
        //   left: "center",
        // },
        tooltip: {},
        legend: [
          {
            tooltip: {
              show: true,
            },
            selectedMode: "false",
            bottom: 20,
            data: [
              "刘备2239",
              "诸葛亮1892",
              "曹操979",
              "关羽948",
              "张飞408",
              "赵云393",
              "孙权390",
              "吕布384",
              "周瑜328",
              "魏延327",
            ],
          },
        ],
        animationDuration: 3000,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            name: "三国演义",
            type: "graph",
            layout: "force",

            force: {
              repulsion: 300,
            },
            data: [
              {
                name: "三国演义",
                // "x": 0,
                // y: 0,
                symbolSize: 150,
                draggable: "true",
                value: 27,
              },
              {
                name: "刘备2239",
                value: 15,
                symbolSize: 80,
                category: "刘备2239",
                draggable: "true",
              },
              {
                name: "使君70",
                symbolSize: 3,
                category: "刘备2239",
                draggable: "true",
                value: 1,
              },
              {
                name: "玄德1770",
                symbolSize: 60,
                category: "刘备2239",
                draggable: "true",
                value: 1,
              },
              {
                name: "皇叔112",
                symbolSize: 15,
                category: "刘备2239",
                draggable: "true",
                value: 1,
              },
              {
                name: "诸葛亮1892",
                value: 60,
                symbolSize: 60,
                category: "诸葛亮1892",
                draggable: "true",
              },
              {
                name: "孔明1643",
                symbolSize: 50,
                category: "诸葛亮1892",
                draggable: "true",
                value: 1,
              },
              {
                name: "卧龙40",
                symbolSize: 3,
                category: "诸葛亮1892",
                draggable: "true",
                value: 1,
              },
              {
                name: "曹操979",
                value: 5,
                symbolSize: 40,
                category: "曹操979",
                draggable: "true",
              },
              {
                name: "孟德29",
                symbolSize: 3,
                category: "曹操979",
                draggable: "true",
                value: 1,
              },
              {
                name: "曹公44",
                symbolSize: 7,
                category: "曹操979",
                draggable: "true",
                value: 1,
              },
              {
                name: "关羽948",
                value: 40,
                symbolSize: 18,
                category: "关羽948",
                draggable: "true",
              },
              {
                name: "云长431",
                symbolSize: 20,
                category: "关羽948",
                draggable: "true",
                value: 1,
              },
              {
                name: "关公508",
                symbolSize: 25,
                category: "关羽948",
                draggable: "true",
                value: 1,
              },
              {
                name: "张飞408",
                value: 8,
                symbolSize: 25,
                category: "张飞408",
                draggable: "true",
              },
              {
                name: "翼德55",
                symbolSize: 5,
                category: "张飞408",
                draggable: "true",
                value: 1,
              },
              {
                name: "赵云393",
                value: 5,
                symbolSize: 30,
                category: "赵云393",
                draggable: "true",
              },
              {
                name: "子龙95",
                symbolSize: 7,
                category: "赵云393",
                draggable: "true",
                value: 1,
              },
              {
                name: "孙权390",
                value: 30,
                symbolSize: 30,
                category: "孙权390",
                draggable: "true",
              },
              {
                name: "仲谋10",
                symbolSize: 3,
                category: "孙权390",
                draggable: "true",
                value: 1,
              },
              {
                name: "吴侯72",
                symbolSize: 10,
                category: "孙权390",
                draggable: "true",
                value: 1,
              },
              {
                name: "吕布384",
                value: 20,
                symbolSize: 30,
                category: "吕布384",
                draggable: "true",
              },
              {
                name: "奉先15",
                symbolSize: 3,
                category: "吕布384",
                draggable: "true",
                value: 1,
              },
              {
                name: "温侯12",
                symbolSize: 3,
                category: "吕布384",
                draggable: "true",
                value: 1,
              },
              {
                name: "周瑜328",
                value: 6,
                symbolSize: 18,
                category: "周瑜328",
                draggable: "true",
              },
              {
                name: "公瑾60",
                symbolSize: 5,
                category: "周瑜328",
                draggable: "true",
                value: 1,
              },
              {
                name: "周郎35",
                symbolSize: 3,
                category: "周瑜328",
                draggable: "true",
                value: 1,
              },
              {
                name: "魏延327",
                value: 6,
                symbolSize: 18,
                category: "魏延327",
                draggable: "true",
              },
              {
                name: "文长12",
                symbolSize: 3,
                category: "魏延327",
                draggable: "true",
                value: 1,
              },
            ],
            links: [
              {
                source: "三国演义",
                target: "刘备2239",
              },
              {
                source: "刘备2239",
                target: "使君70",
              },
              {
                source: "刘备2239",
                target: "玄德1770",
              },
              {
                source: "刘备2239",
                target: "皇叔112",
              },
              {
                source: "三国演义",
                target: "诸葛亮1892",
              },
              {
                source: "诸葛亮1892",
                target: "孔明1643",
              },
              {
                source: "诸葛亮1892",
                target: "卧龙40",
              },
              {
                source: "三国演义",
                target: "曹操979",
              },
              {
                source: "曹操979",
                target: "孟德29",
              },
              {
                source: "曹操979",
                target: "曹公44",
              },
            ],
            categories: [
              {
                name: "刘备2239",
              },
            ],
            emphasis: {
              focus: "adjacency",
            },
            // focusNodeAdjacency: true,
            roam: true,
            // label: {
            //     show: true,
            //     position: "top",
            // },
            label: {
              show: true, // 显示标签
              position: "inside", // 将标签位置设为节点内部
              formatter: "{b}", // 使用节点名称作为标签文本
              fontSize: 14, // 根据需要调整字体大小
              color: "#000", // 根据需要调整字体颜色
            },
            lineStyle: {
              color: "source",
              curveness: 0,
              type: "solid",
            },
            itemStyle: {
              color: (params) => {
                // 动态计算颜色，例如根据节点的值
                const colors = ["#ff5722", "#4caf50", "#2196f3", "#9c27b0"];
                return colors[params.dataIndex % colors.length];
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.initColors();
    this.initChartGraph();
  },
  methods: {
    initColors() {
      const data = this.option.series[0].data;
      const colors = this.colors;
      data.forEach((item, index) => {
        console.log(item, 32);
        item.itemStyle = {
          color: colors[item.value % colors.length],
        };
      });
    },
    initChartGraph() {
      this.chartDom = this.$refs.chart;
      this.myChart = this.$echarts.init(this.chartDom);
      this.myChart.showLoading({
        text: "正在加载数据...",
        color: "#4cbbff",
        maskColor: "rgba(255, 255, 255, 0.8)",
        zlevel: 0,
      });

      this.myChart.setOption(this.option);
      this.myChart.hideLoading();
      // 添加节点点击事件
      this.myChart.on("click", (params) => {
        // 判断是否点击的是节点
        if (params.dataType === "node") {
          // 获取点击的节点数据
          const clickedNode = params.data;
          console.log("点击的节点:", clickedNode);
          this.option = this.option2;
          this.myChart.dispose();
          this.initChartGraph();
          // alert(`你点击了节点: ${clickedNode.name}`);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#homechart2 {
  > div {
    width: 100%;
    height: 670px;
  }
}
</style>